<template>
  <card>
    <!--编辑页面-->
      <Form ref="formItem" :model="formItem" :label-width="80">
        <Tabs value="name1">
          <TabPane label="标签一" name="name1">
          <input type="hidden" v-model="formItem.parentAttrValueid"></input>
          <input type="hidden" v-model="formItem.attrid"></input>
          <input type="hidden" v-model="formItem.createTime"></input>
          <input type="hidden" v-model="formItem.cateid"></input>
          <input type="hidden" v-model="formItem.path"></input>
          <FormItem label="名称">
            <Input v-model="formItem.name"></Input>
          </FormItem>
          <FormItem label="英文名称">
            <Input v-model="formItem.enname"></Input>
          </FormItem>
          <FormItem label="排序" >
            <Input type="text" v-model="formItem.displayorder" number></Input>
          </FormItem>
          <FormItem label="显示">            
            <i-Switch v-model="formItem.display" :true-value=0 :false-value=1>
              <span slot="open">开</span>
              <span slot="close">关</span>
            </i-Switch>
          </FormItem>
          <FormItem label="能否当成SKU属性">            
            <i-Switch v-model="formItem.isskuattribute" :true-value=1 :false-value=0>
              <span slot="open">开</span>
              <span slot="close">关</span>
            </i-Switch>
          </FormItem>
          </TabPane>
        <TabPane label="标签二" name="name2">
          <FormItem label="是否支持自定义图片展示">            
            <i-Switch v-model="formItem.issupportcustomizeimage" :true-value=1 :false-value=0>
              <span slot="open">开</span>
              <span slot="close">关</span>
            </i-Switch>
          </FormItem>
          
          <FormItem label="是否必填">            
            <i-Switch v-model="formItem.required" :true-value=1 :false-value=0>
              <span slot="open">开</span>
              <span slot="close">关</span>
            </i-Switch>
          </FormItem>
          <FormItem label="属性类型">            
            <i-Switch v-model="formItem.aspect" :true-value=1 :false-value=0>
              <span slot="open">交易属性</span>
              <span slot="close">产品属性</span>
            </i-Switch>
          </FormItem>
          <FormItem label="单位">
            <Input v-model="formItem.units"></Input>
          </FormItem>
          <FormItem label="输入类型">
              <Select v-model="formItem.inputType">
                  <Option value="0">文本输入框</Option>
                  <Option value="1">数字输入框</Option>
                  <Option value="2">下拉框</Option>
                  <Option value="3">多选框</Option>
                  <Option value="4">单选框</Option>
                  <Option value="5">下拉框列表</Option>
                  <Option value="6">日期</Option>
              </Select>
          </FormItem>
          </TabPane>
          <TabPane label="标签3" name="name3">
          <FormItem label="规格">
            <Col span="12">
                    <Button type="dashed" long @click="addItem" icon="md-add">添加规格</Button>
                </Col>
          </FormItem>
          <FormItem
                v-for="(item, index) in formItem.attrValues"
                :key="index">
            <Row>
                <Col span="4">
                    <Input type="text" v-model="item.name"  placeholder="name"></Input>
                </Col>
                <Col span="4">
                    <Input type="text" v-model="item.enname"  placeholder="enname"></Input>
                </Col>
                <Col span="4">
                    <Input type="text" v-model="item.displayorder"  placeholder="displayorder"></Input>
                </Col>
                <Col span="4">
                <i-Switch v-model="item.display" :true-value=1 :false-value=0>
                  <span slot="open">开</span>
                  <span slot="close">关</span>
                </i-Switch>
                </Col>
                <Col span="4" offset="1">
                    <Button @click="delItem(index)">Delete</Button>
                </Col>
            </Row>
        </FormItem>
          
          </TabPane>
    </Tabs>
    <FormItem>
            <Button type="primary" @click="handleSubmit('formItem')">提交</Button>
            <Button style="margin-left: 8px" @click="handleCloseTag">取消</Button>
        </FormItem>
      </Form>  
  </card>
</template>

<script>
import { mapMutations } from 'vuex'
import Bus from '@/libs/bus.js'
import { GetAttributeModel } from "@/api/data";
import { addAttributeValue } from "@/api/data";
import { editAttributeValue } from "@/api/data";
export default {
  name:'attributes_edit',
  data() {
    return {      
      show:true,
      formItem: {
        "isskuattribute": 0,
        "display": 0,
        "updateTime": 1537153386000,
        "displayorder": 0,
        "issupportcustomizeimage": "0",
        "units": "",
        "parentAttrValueid": 0,
        "required": 1,
        "enname": "size",
        "attrid": 1,
        "createTime": 1544151940000,
        "cateid": 1,
        "aspect": 1,
        "name": "尺码",
        "inputType": 1,
        "parentAttrid": 0,
        "issupportcustomizevalue": "0",
        "attrValues": [],
        "attributesList":[]
      }
    };
  },
  methods: {
     ...mapMutations([
      'closeTag'
    ]),
    getData() {
      //获取数据
      GetAttributeModel({Id:this.formItem.attrid}).then(res => {
        this.formItem = res.data.data;
      });
    },
    addItem(){
      this.formItem.attrValues.push({
            "attrvalueid": 0,
            "name": "XS",
            "enname": "44",
            "attrid": 1,
            "issku": 1,
            "displayorder": 1,
            "display": 0,
            "createTime": 1537153778000,
            "updateTime": 1537153778000
          });
    },
    delItem(index){
      this.formItem.attrValues.splice(index,1);
    },
    handleCloseTag () {
      debugger;
      this.closeTag({
        name: 'attributes_edit',
        query:{id:this.$route.query.id,cateid:this.formItem.cateid}
      })
    },
    handleSubmit(name) {
      debugger;
      if(this.formItem.attrid!=0){
        //编辑
        editAttributeValue(this.formItem).then(res => {
          this.$Message.success(res.data.data);
        });
      } else {
        //添加
        addAttributeValue(this.formItem).then(res => {
          this.$Message.success(res.data.data);
        });
      }
      this.bus();
      this.handleCloseTag();      
    },
    bus () {
      Bus.$emit('attributes_edit', 'true')
    }
  },
  mounted() {
    debugger;
    var id=this.$route.query.id;
    var cateid=this.$route.query.cateid;
    this.formItem.cateid=cateid;
    this.formItem.attrid=id;
    if(id>0){
      
      this.getData();
    }
  }
};
</script>



